aux-input {
    display: inline-block;
    border: 1px solid #ccc;
    font-size: 14px;
}

aux-input input::-ms-clear, aux-input input::-ms-reveal {
    display: none;
}

aux-input > .aux-input > .readonly {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: none;
}

aux-input[disabled]  > .aux-input > .readonly {
    display: block;
}

aux-input[disabled] {
    cursor: not-allowed;
    background: #eeeeee;
}

aux-input[disabled] > .aux-input > input {
    background-color: transparent;
    cursor: not-allowed;
}

aux-input[disabled] > .aux-input > .placeholder {
    background: #eeeeee;
    cursor: not-allowed;
}

.aux-input {
    position: relative;
    height: 100%;
    font-size: 100%;
}

.aux-input > .placeholder {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #cccccc;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    font-family: "Arial", "Microsoft Yahei";
    line-height: 1.4;
    overflow: hidden;
    &::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
    }
    > div {
        overflow: hidden;
        display: inline-block;
        vertical-align: middle; 
        // $self: #{&};
        // @at-root {
        //     html.ie9 #{$self} {
        //         position: relative;
        //         top: -3%;
        //     }
        //     _:-ms-input-placeholder, :root #{$self} {
        //         position: relative;
        //         top: -3%;
        //     }
        // }
    }
}

.aux-input > .input {
    border: none;
    padding: 0;
    min-height: 1.4em;
    /* position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; */
}

.aux-input > .input:focus {
    outline: none;
}

html.ie8 .aux-input > .input {
    vertical-align: middle;
}